<!DOCTYPE html>
<html>

<head>
    <style>
        .loading-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            background-color: rgba(0, 0, 0, 0.8);
        }

        .loading {
            width: 80px;
            height: 80px;
            border: 10px solid #3498db;
            border-top: 10px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .slider {
            overflow: hidden;
            white-space: nowrap;
        }

        #title {
            display: inline-block;
            animation: slide 10s linear infinite;
        }

        @keyframes slide {
            0% {
                transform: translateX(100%);
            }

            100% {
                transform: translateX(-100%);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div id="loadingContainer" class="loading-container">
        <div class="loading"></div>
    </div>
    <div class="slider">
        <h1 id="title">标题从右向左滑动</h1>
    </div>
    <button onclick="showLoading()">点击加载</button>
    <script>
        function showLoading() {
            var loadingContainer = document.getElementsByClassName("loading-container")[0]
            if (!loadingContainer.style.display || loadingContainer.style.display === "none") {
                loadingContainer.style.display = "flex"
                setTimeout(()=>{loadingContainer.style.display = "none"},3000)
            } else {
                loadingContainer.style.display = "none"
            }
        }
        const title = document.getElementById('title');
        title.addEventListener('mouseenter', () => {
            title.style.animationPlayState = 'paused';
        });
        title.addEventListener('mouseleave', () => {
            title.style.animationPlayState = 'running';
        });
    </script>

</body>

</html>